<template>

    <div class="content-header">
        <h1>图书管理</h1>
    </div>
    <div class="app-container">
        <div class="box">
            <div class="filter-container">
                <el-input placeholder="图书名称" v-model="queryString" style="width: 200px;" class="filter-item"></el-input>
                <el-button @click="getAll">查询</el-button>
                <el-button type="primary" @click="handleCreate">新建</el-button>
            </div>
            <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
                <!-- 表格列... -->
                <el-table-column type="index" align="center" label="序号"></el-table-column>
                <el-table-column prop="type" label="图书类别" align="center"></el-table-column>
                <el-table-column prop="name" label="图书名称" align="center"></el-table-column>
                <el-table-column prop="description" label="描述" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                        <!-- 可能还有更多操作按钮... -->
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
    <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  ></el-pagination>
</template>

<script>
    import { ref, reactive } from 'vue';

export default {
  setup() {
    const queryString = ref('');
    const dataList = reactive([]);
    const currentPage = ref(1);
    const pageSize = ref(10);
    const total = ref(0);

    const fetchData = () => {
      // 模拟从后端获取数据
      console.log('查询图书:', queryString.value);
      // 假设调用后端接口获取图书列表数据
      const result = {
        data: [
          { id: 1,  type: '计算机', name: '操作系统', description: '一本熟悉操作系统的书' },
          { id: 2,  type: '计算机', name: 'Java程序设计', description: '学会它掌握时代的节奏' },
          { id: 3,  type: '计算机', name: 'Javaweb', description: 'Description for Book 1' },
          { id: 4,  type: '计算机', name: 'SpringBoot', description: 'Description for Book 1' },
          { id: 5,  type: '计算机', name: '移动开发技术', description: 'Description for Book 1' },
          { id: 6,  type: '计算机', name: '软件测试', description: 'Description for Book 1' },
          { id: 7,  type: '计算机', name: 'VUE', description: 'Description for Book 1' },
          { id: 8,  type: '计算机', name: 'SpringMvc', description: 'Description for Book 1' },
          { id: 9,  type: '计算机', name: 'SpringCloud', description: 'Description for Book 1' },
          { id: 10, type: '计算机', name: '现代', description: 'Description for Book 1' },
          { id: 11, type: '计算机', name: '大学英语', description: 'Description for Book 1' },
          { id: 12, type: '计算机', name: '高数', description: 'Description for Book 1' },
          { id: 13, type: '计算机', name: '算法与设计', description: 'Description for Book 1' },
          { id: 14, type: '计算机', name: '哈哈啊', description: 'Description for Book 1' },
          // ... 更多图书数据
         
        ],
        total: 100, // 总数据条数
      };
      dataList.splice(0, dataList.length, ...result.data);
      total.value = result.total;
    };

    const handleCreate = () => {
      // 处理新建图书逻辑
      console.log('新建图书');
      // ... 具体的新建逻辑
      fetchData(); // 新建完成后刷新数据
    };

    const handleUpdate = (row) => {
      // 处理编辑图书逻辑
      console.log('编辑图书:', row);
      // ... 具体的编辑逻辑
      fetchData(); // 编辑完成后刷新数据
    };

    const handleDelete = (id) => {
      // 处理删除图书逻辑
      console.log('删除图书:', id);
      // ... 具体的删除逻辑
      fetchData(); // 删除完成后刷新数据
    };

    const handleSizeChange = (val) => {
      // 处理每页条数变化
      pageSize.value = val;
      fetchData(); // 刷新数据
    };

    const handleCurrentChange = (val) => {
      // 处理当前页码变化
      currentPage.value = val;
      fetchData(); // 刷新数据
    };

    fetchData(); // 初始化时获取数据

    return {
      queryString,
      dataList,
      currentPage,
      pageSize,
      total,
      handleCreate,
      handleUpdate,
      handleDelete,
      handleSizeChange,
      handleCurrentChange,
    };
  },
};
</script>

<style scoped>

</style>

<!-- import { ref, reactive } from 'vue';

    export default {
        setup() {
            const queryString = ref(''); // 图书名称查询字符串  
            const dataList = reactive([]); // 假设这是一个响应式的图书列表  

            // 模拟方法，实际应用中需要替换为实际的数据获取逻辑  
            const getAll = () => {
                // TODO: 发送请求到后端，获取图书列表，并更新 dataList  
                console.log('查询图书:', queryString.value);
                // 假设获取到数据后更新列表  
                dataList.push({ id: 1, type: 'Fiction', name: 'Book 1', description: 'Description for Book 1' });
                // ... 添加更多图书数据  
            };

            const handleCreate = () => {
                // TODO: 处理新建图书的逻辑  
                console.log('新建图书');
            };

            const handleUpdate = (row) => {
                // TODO: 处理编辑图书的逻辑  
                console.log('编辑图书:', row);
            };

            // 返回响应式状态和方法，以便在模板中使用  
            return {
                queryString,
                dataList,
                getAll,
                handleCreate,
                handleUpdate,
            };
        },
    };   -->